<template>
    <div>
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column label="图片" width="120">
                <template slot-scope="scope">
                    <img :src="'http://localhost:5216/' + scope.row.imgs[0].imgPath" style="width:100px;" />
                </template>
            </el-table-column>
            <el-table-column prop="name" label="名称" width="120">
            </el-table-column>
            <el-table-column prop="goodsPrice" label="价格" width="120">
            </el-table-column>

            <el-table-column label="数量">
                <template slot-scope="scope">
                    <el-input-number v-model="scope.row.goodsNumber" size="mini"
                        @change="handleChange(scope.row.goodsId, scope.row.goodsNumber)" :min="1" :max="10" label="描述文字">
                    </el-input-number>
                </template>
            </el-table-column>

            <el-table-column prop="address" label="小计" show-overflow-tooltip>
                <template slot-scope="scope">
                    {{ scope.row.goodsNumber * scope.row.goodsPrice }}
                </template>
            </el-table-column>
            <el-table-column label="操作" show-overflow-tooltip>

                <template slot-scope="scope">
                    <el-button size="mini" type="danger" @click="delCar(scope.row.goodsId)">删除</el-button>
                </template>


            </el-table-column>
        </el-table>


<el-button @click="delCarAll()">批量删除</el-button>
        <div style="margin-top: 20px;margin-right: 20px; text-align: right;">
            <div>当前选中了{{ account.number }}商品，应付金额：￥{{ account.money }}元</div>
            <div>运费：￥{{ account.yunfei }}元</div>
            <div>合计：￥{{ account.total }}元</div>
            <div>
                <el-button type="danger" :disabled="account.btnState" @click="goToAccount">立即结算</el-button>
            </div>
        </div>
    </div>
</template>
  
<script>
export default {
    data() {
        return {
            num: 1,
            account: {
                number: 0,//选中的数量
                money: 0.00,//应付金额
                yunfei: 0.00,//运费
                total: 0.00,//合计
                btnState: true //按钮状态
            },
            tableData: [],
            multipleSelection: []
        }
    },
    mounted() {
        this.onLoadData()
    },
    methods: {
        //跳转去结算页面
        goToAccount(){
            this.$router.push('/car/account')
        },
        //删除所有商品从购物车（选中的商品）
        delCarAll(){
            //用户id
            //选中的商品
            let url='http://localhost:5216/goods/car/delete/all'
            // let data={
            //     userId:'123456789',
            //     goods:this.multipleSelection
            // }
            this.$http.post(url,this.multipleSelection).then(res=>{
                console.log(res)
            })
        },
        //从购物车，删除商品
        delCar(goodsId) {
            if (confirm('确认删除吗？')) {
                let url = 'http://localhost:5216/goods/car/delete'
                let data = {
                    userId: '123456789',
                    goodsId: goodsId
                }
                this.$http.post(url, data).then(res => {
                    this.$message(res.data.message)
                    if (res.data.code == 200) {
                        this.onLoadData()
                    }
                })
            }
        },
        //计数器事件
        handleChange(goodsId, goodsNumber) {
            //修改购买数量时，需要知道修改哪个用户（本身登录的这个用户）、哪个具体的商品的数量
            let userId = '123456789'  //可以从本地缓存（登录时存储的缓存）中获取

            let url = 'http://localhost:5216/goods'
            let data = {
                userId: userId,
                goodsId: goodsId,
                goodsNumber: goodsNumber
            }
            this.$http.put(url, data).then(res => {
                console.log(res)
            })

        },
        //加载缓存（购物车）数据
        onLoadData() {
            let url = 'http://localhost:5216/goods/car/list?userid=123456789'
            this.$http.get(url).then(res => {
                this.tableData = res.data.data

            }).catch(error => {
                console.log('error')
                console.log(error)
            })
        },

        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            console.log(val)
            this.multipleSelection = val;

            //假设，总价超过a或等于4000，不计运费，否则运费为200元

            let number = 0
            let money = 0
            let yunfei = 0
            let total = 0
            this.multipleSelection.forEach(x => {
                number += x.goodsNumber
                money += x.goodsNumber * x.goodsPrice
            })
            this.account.number = number
            this.account.money = money

            if (money < 4000 && money > 0)
                yunfei = 200.00
            else
                yunfei = 0.00

            total = money + yunfei

            this.account.yunfei = yunfei
            this.account.total = total

            if (total > 0)
                this.account.btnState = false
            else
                this.account.btnState = true

        }
    }
}
</script>